<template>
    <div class="quill-wrapper">
        <!--<quill-editor-->
            <!--class="quill-editor"-->
            <!--v-model="content"-->
            <!--ref="myQuillEditor"-->
            <!--:options="editorOption"-->
            <!--@blur="onEditorBlur($event)"-->
            <!--@focus="onEditorFocus($event)"-->
            <!--@ready="onEditorReady($event)">-->
        <!--</quill-editor>-->
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="公司名字">
                <el-input v-model="form.company"></el-input>
            </el-form-item>
            <el-form-item label="英文名">
                <el-input v-model="form.en_name"></el-input>
            </el-form-item>
            <el-form-item label="固定电话">
                <el-input v-model="form.telephone"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="form.mobilephone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="logo">
                <!--:on-preview="handlePreview"
                    :on-remove="handleRemove"-->
                <el-upload
                    class="upload-demo logo-upload"
                    :action="uploadPath+'?type=logo'"
                    name="images"
                    :file-list="form.logo"
                    :on-remove="_=>handleRemove(_,'logo')"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="首页图片">
                <!--:file-list="JSON.parse(form.images)"-->
                <el-upload
                    class="upload-demo"
                    :action="uploadPath+'?type=images'"
                    name="images"
                    :file-list="form.images"
                    :on-remove="_=>handleRemove(_,'images')"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="友情链接">
                <!--:file-list="JSON.parse(form.images)"-->
                <!--:file-list="form.friends || []"-->
                <el-upload
                    class="upload-demo"
                    :action="uploadPath+'?type=friends'"
                    name="images"
                    :on-remove="_=>handleRemove(_,'friends')"
                    >
                    <!--<i class="el-icon-plus"></i>-->
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <el-table
                    :data="form.friends"
                >
                    <el-table-column
                        label="图片"
                        prop="name"
                    >
                        <template slot-scope="scope">
                            <p>{{scope.row.name}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="链接"
                        prop="src"
                    >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.src"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="经营范围">
                <!--<el-input type="textarea"-->
                          <!--v-model="form.manage"-->
                          <!--autoSize-->
                <!--&gt;</el-input>-->
                <vue-editor  v-model="form.manage" ></vue-editor>
            </el-form-item>
            <el-form-item label="公司简介">
                <vue-editor  v-model="form.introduce" ></vue-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        <!--<el-button-->
            <!--size="small"-->
            <!--type="text"-->
            <!--class="submit-btn"-->
        <!--&gt;提交</el-button>-->
        <!--<el-button-->
            <!--size="small"-->
            <!--type="text"-->
            <!--class="cancel-btn"-->
        <!--&gt;取消</el-button>-->
    </div>
</template>

<script>
    import api from '../utils/api'
    import {get, post, baseURL} from '../utils/request'
    import { VueEditor, Quill } from "vue2-editor";
    // import {quillEditor,Quill} from 'vue-quill-editor'
    export default {
        name: "companyProfile",
        // components:{quillEditor},
        data () {
            return {
                form: {
                    company : '',
                    en_name: '',
                    manage : '',
                    email : '',
                    address : '',
                    logo : [],
                    images  : [],
                    introduce : '',
                    telephone : '',
                    mobilephone : '',
                    thumbnail:'',
                    friends: []
                },
                uploadPath: baseURL + api.upload
                // editorOption: {
                //     theme: 'snow',
                //     boundary: document.body,
                //     modules: {
                //         toolbar: [
                //             ['bold', 'italic', 'underline'],
                //             [{ 'header': 1 }, { 'header': 2 }],
                //             [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                //             [{ 'size': ['small', false, 'large', 'huge'] }],
                //             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                //             [{ 'align': [] }],
                //             ['clean'],
                //             ['link', 'image']
                //         ]
                //     },
                //     placeholder: '输入内容',
                //     readOnly: false
                // },
                // content: '',

            }
        },
        mounted () {
            this.getData()
        },
        components:{
            VueEditor
        },
        methods: {
            onEditorFocus ($event) {
                console.log($event)
            },
            onEditorReady ($event) {
                console.log($event)
            },
            onEditorBlur ($event) {
                console.log($event)
            },
            getData(type){
                get(api.getInfo).then(res=>{
                    this.form = res.data[0] || {}
                    this.form.logo = JSON.parse(this.form.logo)
                    this.form.images = JSON.parse(this.form.images)
                    this.form.friends = JSON.parse(this.form.friends)
                }).catch(err=>{

                })
            },
            onSubmit(){
                let {form} = this
                delete form.logo
                delete form.images
                form.friends = JSON.stringify(form.friends)
                post(api.updateInfo,{
                    form
                }).then(res=>{
                    this.$message(res.msg)
                    this.getData()
                }).catch(err=>{
                    this.getData()
                    this.$message(err.msg||'提交错误')
                })
            },
            handleRemove(e,file){
                post(api.removeFile,{
                    fileName:e.name,
                    type: file
                }).then(res=>{
                    this.$message(res.msg)
                    this.getData()
                }).catch(err=>{
                    this.getData()
                    this.$message(err.msg||'提交错误')
                })
            }
        }
    }
</script>

<style scoped>
    .quill-editor{
        height: 400px;
    }
    .quill-wrapper{
        position: relative;
    }
    .submit-btn{
        position: absolute;
        top: 5px;
        right: 20px;
    }
    .cancel-btn{
        position: absolute;
        top: 5px;
        right: 70px;
    }
    .logo-upload{
        width: 150px;
        height: 150px;
        overflow: hidden;
    }
</style>
